@use '@scss/common.scss' as *;

.tooltip {
  all: unset;
  display: flex;
  position: relative;
  cursor: pointer;
  border-radius: 3px;

  &:hover svg,
  &:focus-visible svg {
    opacity: 0.75;
  }

  &:focus-visible {
    @include outline;
  }
}

.tip {
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
}

.show {
  .tip {
    opacity: 1;
  }
}
